<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-05-06 23:09:53
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-05-15 10:51:05
 * @FilePath: /data-center-web-update/index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="<%- title %>" />
        <meta name="keywords" content="<%- title %>" />
        <title><%- title %></title>
    </head>

    <body>
        <div id="app">
            <div class="loader"></div>
        </div>
    </body>
    <!-- <script type="module" src="/src/main.ts"></script> -->

    <style>
        html,
        body,
        #app {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .loader {
            position: relative;
            width: 40px;
            aspect-ratio: 0.577;
            overflow: hidden;
            clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
            animation: l19 2s infinite linear;
        }

        .loader::before {
            position: absolute;
            inset: -150%;
            content: '';
            background: repeating-conic-gradient(
                from 30deg,
                #ffabab 0 60deg,
                #abe4ff 0 120deg,
                #ff7373 0 180deg
            );
            animation: inherit;
            animation-direction: reverse;
        }

        @keyframes l19 {
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</html>
